<template>
  <div class="wrapper">
    <div class="titel-row">
      <div class="home-icon">
        <img src="../../assets/inquiryRegister/home.png" alt>
      </div>
      <div class="title">事件登记</div>
    </div>
    <div class="content">
      <SearchHeader v-on:callback="onSearchCallback" v-bind:config="searchConfig"/>
      <div class="table-wrapper">
        <el-table
          v-on:cell-click="onClickRow"
          :row-class-name="tableRowClassName"
          stripe
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          row-key="id"
        >
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column
            :formatter="item.formatter"
            v-for="(item,index) in thConfig"
            :key="index"
            v-bind:prop="item.prop"
            v-bind:label="item.label"
          ></el-table-column>
          <el-table-column label="操作" width="220">
            <template slot-scope="scope">
              <el-tooltip content="查看" placement="top">
                <el-button
                  v-on:click.stop.prevent="onDetail(scope.row)"
                  icon="el-icon-search"
                  size="small"
                  circle
                />
              </el-tooltip>
              <el-tooltip content="编辑" placement="top" v-if="scope.row.status<1">
                <el-button
                  v-on:click.stop.prevent="openModal('addincidentRegister',{item:scope.row})"
                  type="primary"
                  icon="el-icon-edit-outline"
                  size="small"
                  circle
                />
              </el-tooltip>
              <el-tooltip content="办结" placement="top">
                <Popover title="确定办结吗？" v-on:onConfirm="finish(scope.row)">
                  <el-button
                    v-on:click.stop.prevent
                    style="margin-left:10px"
                    type="success"
                    icon="el-icon-document"
                    size="small"
                    circle
                  />
                </Popover>
              </el-tooltip>
              <el-tooltip content="上报" placement="top" v-if="scope.row.status<1">
                <Popover title="确定上报吗？" v-on:onConfirm="openModal('report',{item:scope.row})">
                  <el-button
                    v-on:click.stop.prevent
                    style="margin-left:10px"
                    type="success"
                    size="small"
                    circle
                  >
                    <img width="12px" style="height:12px;" :src="dispatchIcon" alt>
                  </el-button>
                </Popover>
              </el-tooltip>
              <el-tooltip content="删除" placement="top" v-if="scope.row.status<1">
                <Popover title="确定删除吗？" v-on:onConfirm="deleteHandler(scope.row)">
                  <el-button
                    v-on:click.stop.prevent
                    style="margin-left:10px"
                    type="danger"
                    icon="el-icon-delete"
                    size="small"
                    circle
                  />
                </Popover>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <div class="handle-row">
          <button
            v-on:click="openModal(item.type,{item,isCreate: true})"
            class="handle-btn"
            v-bind:class="[item.color]"
            v-for="(item,index) in buttonConfig"
            :key="index"
            :disabled="item.type!='addincidentRegister'&&(multipleSelection&&multipleSelection.length==0)"
          >
            <img :src="item.icon" alt>
            <span>{{item.name}}</span>
          </button>
        </div>
      </div>
      <div class="pager">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="10"
          prev-text="上一页"
          next-text="下一页"
          layout="total, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <AddDialog @callback="getList"/>
    <ViewDetail
      width="800px"
      :dialogVisible="detailVisible"
      @onClose="detailVisible=false"
      :list="detailData"
      :columns="detailColumns"
    />
  </div>
</template>

<script>
import SearchHeader from "../../components/layout/searchHeader.vue"; //搜索栏
import AddDialog from "../../components/incidentRegister/addDialog.vue"; //新增dialog
import { Popover, ViewDetail } from "../../components/common"; //小弹窗
import Pubsub from "../../utils/pubsub";
const addIcon = require("../../assets/inquiryRegister/add.png");
const editIcon = require("../../assets/inquiryRegister/edit.png");
const deleteIcon = require("../../assets/inquiryRegister/delete.png");
const dispatchIcon = require("../../assets/inquiryRegister/dispatch.png");
import {
  ZHZXEventInfoQueryPage,
  deletePretrial,
  findByDictCode,
  ZHZXEventInfoDelete,
  ZHZXEventInfoFinish,
  ZHZXEventInfoReport
} from "../../config/api.js";
import { getTimeStr } from "../../utils";
export default {
  components: {
    SearchHeader,
    AddDialog,
    Popover,
    ViewDetail
  },
  data() {
    //城管中心-事件管理
    return {
      dispatchIcon,
      listRequest: { pageNum: 1, pageSize: 10 }, //列表请求餐来
      detailVisible: false, //详情窗口显示隐藏
      detailData: {}, //详情数据
      areaCode: [], //数据字典返回值--区域
      multipleSelection: [], //选中的项
      total: 0, //共多少条
      getTimeStr,
      currentRow: {}, //当前操作的项
      thConfig: [
        // { prop: "ems", label: "快递编码" },
        { prop: "eventNumber", label: "工单号" },
        { prop: "eventTitle", label: "事件标题" },
        { prop: "eventTypeName", label: "事件类别" },
        { prop: "eventSourceCodeName", label: "事件来源" },
        { prop: "reporterName", label: "反应人" },
        { prop: "telNo", label: "反应人电话" },
        { prop: "disposalUnitCodeName", label: "处置单位" },
        { prop: "statusName", label: "当前状态" },
        { prop: "isReceive", label: "是否接收" },
        {
          prop: "myLimitTime",
          label: "本级到期时间",
          formatter: function(row, column) {
            return getTimeStr(row.myLimitTime,'yyyy-MM-dd');
          }
        },
        {
          prop: "highLimitTime",
          label: "市级到期时间",
          formatter: function(row, column) {
            return getTimeStr(row.highLimitTime,'yyyy-MM-dd');
          }
        },
        {
          prop: "receiveTime",
          label: "接收时间",
          formatter: function(row, column) {
            return getTimeStr(row.receiveTime);
          }
        },
      ], //table头部配置
      tableData: [],
      buttonConfig: [
        {
          name: "新增",
          icon: addIcon,
          type: "addincidentRegister",
          color: "main"
        }
        // {
        //   name: "删除",
        //   icon: deleteIcon,
        //   type: "delete",
        //   color: "default"
        // },
        // {
        //   name: "办结",
        //   icon: dispatchIcon,
        //   type: "finish",
        //   color: "default"
        // }
        // {name:"修改",icon:editIcon,type:"edit",color:"green"},
        // {name:"删除",icon:deleteIcon,type:"delete",color:"default"},
      ],
      searchConfig: [
        //搜索栏配置
        {
          label: "事件标题/工单号",
          code: "keyword",
          type: "search",
          value: "",
          placeholder: "输入事件标题/工单号查询……",
        },
        {
          label: "当前状态",
          code: "status",
          type: "radio",
          value: "",
          data: [
            { name: "全部", value: "", active: true },
            { name: "未处置", value: "0", active: false },
            { name: "已上报", value: "1", active: false }
          ]
        },
        {
          label: "上报时间",
          code: ["startTime", "endTime"],
          type: "rangePicker",
          value: ""
        },
        {
          label: "所属类别",
          code: "eventType",
          type: "radio",
          value: "",
          data: [
            { name: "全部", value: "", active: true },
            { name: "投诉举报", value: "1", active: false },
            { name: "咨询求助", value: "2", active: false },
            { name: "意见建议", value: "3", active: false },
            { name: "表彰表扬", value: "4", active: false }
          ]
        }
      ],
      detailColumns: [
        { dataIndex: "eventNumber", title: "工单号" },
        { dataIndex: "eventTitle", title: "事件标题" },
        { dataIndex: "eventTypeName", title: "事件类别" },
        { dataIndex: "eventSourceCodeName", title: "事件来源" },
        { dataIndex: "reporterName", title: "反应人" },
        { dataIndex: "telNo", title: "反应人电话" },
        { dataIndex: "disposalUnitCodeName", title: "处置单位" },
        { dataIndex: "statusName", title: "当前状态" },
        { dataIndex: "isReceive", title: "是否接收" },
        {
          dataIndex: "myLimitTime",
          title: "本级到期时间",
          render: function(row, column) {
            return getTimeStr(row.myLimitTime,'yyyy-MM-dd');
          }
        },
        {
          dataIndex: "highLimitTime",
          title: "市级到期时间",
          render: function(row, column) {
            return getTimeStr(row.highLimitTime,'yyyy-MM-dd');
          }
        },
        {
          dataIndex: "receiveTime",
          title: "接收时间",
          render: function(row, column) {
            return getTimeStr(row.receiveTime);
          }
        },
        { dataIndex: "eventDesc", title: "事件描述" },
        { dataIndex: "eventKeyword", title: "事件关键词" },
      ]
    };
  },
  methods: {
    /**
     * 搜索栏回调
     */
    onSearchCallback(re = {}) {
      let request = Object.assign(this.listRequest, re);
      this.listRequest = request;
      this.getList();
    },
    /**
     * 设置table某一项class
     */
    tableRowClassName({ row, rowIndex }) {
      // if (rowIndex === 2) {
      //   return "warning-row";
      // }
      if (rowIndex % 2 === 0) {
        return "even-row";
      } else {
        return "odd-row";
      }
    },
    /**
     * 设置选中项
     */
    handleSelectionChange(e = []) {
      if (e.length) {
        e.map(item => {
          this.multipleSelection.push(item.id);
        });
      } else {
        this.multipleSelection = [];
      }
    },
    /**
     * 查看详情
     */
    onDetail(e) {
      // this.detailData=e||{};//传参
      this.detailData = e || {}; //传参
      this.detailVisible = true;
    },
    //删除，不需要任何事件，只为处理事件冒泡。
    onDelete() {},
    /**
     *
     *确认 删除
     */
    deleteHandler(e) {
      // this.$confirm("请确认是否删除?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning"
      // }).then(() => {
      // });
      if (!e.id) return;
      ZHZXEventInfoDelete({ ids: [e.id] }).then((res = {}) => {
        this.$message({
          message: "删除成功",
          type: "success"
        });
        this.multipleSelection = [];
        this.getList();
      });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.listRequest.pageNum = val;
      this.getList();
    },
    /**
     * 操作按钮点击事件
     */
    openModal(type, values) {
      if (type == "addincidentRegister") {
      } else if (type == "delete") {
        this.deleteHandler(values); //删除
        return;
      } else if (type == "report") {
        //上报
        this.report(values);
        return;
      } else if (type == "finish") {
        this.finish(values); //办结
        return;
      }
      Pubsub.publish(type, values);
    },
    getList() {
      ZHZXEventInfoQueryPage(this.listRequest).then((res = {}) => {
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      });
    },
    /**
     * 上报
     */
    report(values) {
      let { item = {} } = values;
      ZHZXEventInfoReport({ ids: [item.id] }).then((res = {}) => {
        this.$message({
          type: "success",
          message: "上报成功!"
        });
        this.multipleSelection = [];
        this.getList();
      });
    },
    /**
     * 办结
     */
    finish(values) {
      // this.$confirm("请确认是否办结?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning"
      // }).then(() => {
      // });
      ZHZXEventInfoFinish({ ids: [values.id] || [] }).then((res = {}) => {
        this.$message({
          type: "success",
          message: "办结成功!"
        });
        this.multipleSelection = [];
        this.getList();
      });
    },
    /**
     * 点击table row
     */
    onClickRow(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    }
  },
  created() {
    this.getList();
    // this.getDictCode();
  }
};
</script>

<style lang = "scss" scoped>
.wrapper {
  margin: 20px;
  background: #fff;
}
.titel-row {
  display: flex;
  align-items: center;
  .home-icon {
    height: 50px;
    width: 50px;
    background: #1a36a9;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .title {
    font-size: 22px;
    color: #272c67;
  }
}
.content {
  padding: 0 20px 80px 20px;
}
.pager {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}
.table-wrapper {
  position: relative;
  margin-top: 46px;
  .handle-row {
    position: absolute;
    top: -40px;
    right: 0;
    display: flex;
    justify-content: flex-end;
  }
  .handle-btn {
    width: 76px;
    height: 30px;
    border-radius: 3px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      margin-right: 10px;
    }
    &:last-child {
      margin-right: 0;
    }
    &:active {
      opacity: 0.8;
    }
    &.main {
      background: #1a36a9;
      color: #fff;
    }
    &.green {
      background: #007130;
      color: #fff;
    }
    &.default {
      background: #e5e5e5;
    }
    &:disabled {
      background: #ccc;
      color: #fff;
      opacity: 1;
    }
  }
}
</style>
<style>
</style>
